<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in cartlist" :key="index">
        <img :src="item" alt />
      </van-swipe-item>
    </van-swipe>
    <br />
    <h4 class="title">{{cartlisthtml.name}}</h4>
    <br />
    <p class="title1">{{cartlisthtml.characteristic}}</p>
    <br />
    <p>
      <span class="title" style="font-size:10px;color:red">低价￥:</span>
      <span style="font-size:14px;color:red">{{cartlisthtml.minPrice}}</span>
      <span
        style="font-size:11px;color: rgb(160, 155, 155);margin-left:2.5%"
      >原价:{{cartlisthtml.minBuyNumber}}</span>
    </p>
    <br />
    <div style="width:100%;height:10px;background:#f3f3f3"></div>
    <div class="cartlistClass" v-html="cartlist_xx"></div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon badge='1' icon="shopping-cart-o" text="购物车" />
      <van-goods-action-button color="#be99ff" type="warning" text="加入购物车" />
      <van-goods-action-button color="#7232dd" type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartlist: [],
      cartlist_xx: [],
      cartlisthtml: [],
    };
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
  },
  mounted() {
    let id = this.$route.query.id;
    this.$axios
      .cartlist({
        params: {
          id,
        },
      })
      .then((res) => {
        // console.log(res.data.data);
        this.cartlist = res.data.data.pics2;
        this.cartlisthtml = res.data.data.basicInfo;

        this.cartlist_xx = res.data.data.content;
        // console.log(this.cartlist);
      });
  },
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 400px;
  text-align: center;
  background-color: #ffffff;
  height: 400px;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
.cartlistClass >>> img {
  width: 100% !important;
  height: 100% !important;
}
.cartlistClass {
  font-size: 14px;
  display: block;
  width: 100%;
}
.title {
  margin-left: 3%;
}
.title1 {
  color: rgb(160, 155, 155);
  font-size: 12px;
  margin-left: 3%;
}
</style>